<template>
  <div v-if="visible">
    <el-dialog :visible.sync="visible"
               :title="'人脸' + '(' + dataForm.realName + ' ' + dataForm.username + ')'"
               :modal="false"
               class="user-dialog add-or-updata"
               width="25%"
               :before-close="closeDialog"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <el-form :model="dataForm"
               v-loading="dataListLoading"
               :element-loading-text="$t('loading')"
               ref="dataForm"
               label-position="left"
               @keyup.enter.native="dataFormSubmitHandle()"
               label-width="0px">
        <el-form-item prop="faceUrl"
                      :rules="required()">
          <file-upload style="text-align: center"
                       reg=".(jpg)$"
                       ref="fileUpload"
                       accept=".jpg"
                       title="上传图片"
                       :limit="1"
                       v-model="dataForm.faceUrl"
                       :paramData="{bucketName:'faceImg/images'}"
                       action="/springbootApi/system/oss/upload"
                       uploadType="picture-card"
                       @success="successImgLoad"
                       @remove="handleImgRemove" />
        </el-form-item>
      </el-form>
      <div>
        <h2>人像图片规范</h2>
        <div class="info">
          <!-- <div>a.照片需要小于4M</div>
          <div>b.照片大小推荐500*500c.图片格式JPG、JPEG、PNG</div>
          <div>d.人像无遮挡(如戴帽子、口罩、眼镜等)、无修图</div>
          <div>e.人像需双眼睁开、表情自然、露额，头发不要遮挡</div> -->
          <div>请上传或采集正面免冠照，露出眼睛和眉毛；</div>
          <div>图片文件支持.jpg格式；</div>
          <div>图片文件大小10 KB~200 KB。</div>
        </div>
      </div>
      <template slot="footer">
        <el-button @click="closeDialog()">{{ $t("cancel") }}</el-button>
        <el-button type="primary"
                   :loading="dataListLoading"
                   @click="dataFormSubmitHandle()">{{ $t("confirm") }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import debounce from 'lodash/debounce'
import fileUpload from '@/components/file-upload/file-upload1'
export default {
  mixins: [mixinViewModule, minFormValidate],
  data () {
    return {
      mixinViewModuleOptions: {
        deleteImgURL: '/system/oss/delete',
        getDataListURL: '', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addURL: 'tb/carApply/insertApply', // 添加或修改接口，API地址
        updateURL: 'tb/car/updateCar', // 添加或修改接口，API地址
        getDataInfoURL: 'tb/car/getCar?id=', // 数据详情，API地址
        deleteURL: '', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },
      tempDeleteFileList: [], // 临时删除的文件
      newEditFileList: [], // 保存在编辑时新增的文件路径
      newThumbnailList: [], // 保存在编辑时新增的thumbnail图路径
      tempThumbnailList: [], // 临时删除的thumbnail图的图片
      visible: false,
      dataForm: {
        faceUrl: ''
      },
      initialFaceUrl: '',
      ifDelete: 1
    }
  },
  computed: {
  },
  components: { fileUpload },
  methods: {
    init (data) {
      if (data) {
        this.dataForm = data
      }
      this.visible = true
      this.$nextTick(() => {
        if (this.dataForm.faceUrl) {
          this.initialFaceUrl = this.dataForm.faceUrl
          let temp = []
          temp[0] = { name: data.faceUrl, url: data.faceUrl }
          if (this.$refs.fileUpload) {
            this.$refs.fileUpload.init(temp)
          }
        }
      })
    },
    handleImgRemove (url) {
    //   let index = this.dataForm.url.findIndex(item => item === url.url)
    //   this.dataForm.url.splice(index, 1)
      this.dataForm.faceUrl = ''
      if (this.initialFaceUrl !== url.url) {
        return this.deleteData({
          url: this.mixinViewModuleOptions.deleteImgURL,
          paramData: { files: url.url },
          isLoading: false
        })
      }
    },
    successImgLoad (name, url) {
      this.dataForm.faceUrl = url
    },
    closeDialog () {
    //   this.$refs.dataForm.resetFields()
      this.dataForm.faceUrl = this.dataForm.faceUrl === null ? '' : this.dataForm.faceUrl
      if (this.initialFaceUrl !== this.dataForm.faceUrl && this.ifDelete === 1) {
        this.deleteData({
          url: this.mixinViewModuleOptions.deleteImgURL,
          paramData: { files: this.dataForm.faceUrl },
          isLoading: false
        })
      }
      this.dataForm.id = ''
      this.dataForm.faceUrl = ''
      this.initialFaceUrl = ''
      this.$emit('callBack')
      this.visible = false
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            if (this.initialFaceUrl !== this.dataForm.faceUrl) {
              this.dataForm.updateTag = 1
              this.deleteData({
                url: this.mixinViewModuleOptions.deleteImgURL,
                paramData: { files: this.initialFaceUrl },
                isLoading: false
              })
            } else {
              this.dataForm.updateTag = 2
            }
            console.log(this.dataForm.updateTag)
            this.$http.put('system/sysUser/updateUserFaceUrl?faceUrl=' + this.dataForm.faceUrl + '&id=' + this.dataForm.id + '&updateTag=' + this.dataForm.updateTag).then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg)
              }
              this.ifDelete = 0
              this.$message.success('保存成功')
              this.closeDialog()
            })
          }
        })
      },
      1000,
      { leading: true, trailing: false }
    )
  }
}
</script>

<style lang="scss" scoped>
.info {
  // border-left: 3px solid #286bff;
  color: #ababab;
  padding: 20px;
  div {
    letter-spacing: 1px;
    height: 20px;
  }
}
</style>
